<template>
	<view class="home">
		<serchView placeholder="搜索学校名称" @submit="submit" />
		<scroll-view scroll-y class="scroll_view">
			<view class="content">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="title" @click="router(`/pages/book/storeDeta?id=${item.id}`)">
							<image src="https://kelai.huazhuangpin168.cn/static/images/1.png" class="cover"></image>
							<view class="info">
								<image :src="item.image" class="avatar"></image>
								<view class="name">{{item.name}}</view>
							</view>
							<view class="more">进店查看更多商品></view>
						</view>

						<scroll-view scroll-x class="scroll_box">
							<view class="swiper_list">
								<!-- <view class="swiper_item" v-for="(dataItem,dataIndex) in item.products" :key="dataIndex"
									@click="router(`/pages/goods_details/index?id=${dataItem.id}`)">
									<image :src="dataItem.image" class="book_cover"></image>
									<view class="book_name">{{dataItem.store_name}}</view>
								</view> -->
								<view class="swiper_item" v-for="(dataItem,dataIndex) in item.products" :key="dataIndex"
									@click="routerTabbar">
									<image :src="dataItem.image" class="book_cover"></image>
									<view class="book_name">{{dataItem.store_name}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</scroll-view>
		<pageFooter @newDataStatus="newDataStatus" v-show="showBar"></pageFooter>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/new_store.js'

	import serchView from '@/components/serchView/serchView';
	import pageFooter from '@/components/pageFooter/index.vue'
	export default {
		components: {
			serchView,
			pageFooter
		},
		data() {
			return {
				isFooter: false,
				showBar: false,
				pdHeight: 0,

				keywords: "",
				list: []
			}
		},
		onLoad() {
			this.getDataList();
		},
		onShow() {
			uni.removeStorageSync("store_id")
		},
		methods: {
			router(url) {
				uni.navigateTo({
					url
				})
			},
			routerTabbar() {
				uni.switchTab({
					url: '/pages/goods_cate/goods_cate'
				})
			},

			getDataList() {
				getList({
					keyword: this.keywords,
					with_products: 1
				}).then(res => {
					this.list = res.data;
					// this.info = res.data
					// res.data.forEach(item => {
					// 	if (this.sortIndex == item.id) {
					// 		this.latitudeStore = item.latitude;
					// 		this.longitudeStore = item.longitude;
					// 		this.covers.push({
					// 			title: item.name,
					// 			latitude: item.latitude,
					// 			longitude: item.longitude,
					// 			iconPath: item.image,
					// 			width: 30,
					// 			height: 30
					// 		})
					// 	}
					// })
				})
			},


			submit(value) {
				this.keywords = value;
				this.getDataList()
			},


			newDataStatus(val, num) {
				this.isFooter = val ? true : false;
				this.showBar = val ? true : false;
				this.pdHeight = num;
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: calc(100vh - var(--window-bottom));
		background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
		overflow: hidden;
	}

	.scroll_view {
		height: calc(100vh - var(--window-bottom) - 112rpx);

		.content {
			padding: 0 32rpx;
			box-sizing: border-box;

			.list {
				.item {
					box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(242, 245, 246, 0.7);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-bottom: 24rpx;
					background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
					overflow: hidden;

					.title {
						height: 88rpx;
						padding: 0 24rpx;
						box-sizing: border-box;
						// background: url(@/static/images/1.png) no-repeat;
						// background-size: 100% 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;

						.cover {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
						}

						.info {
							display: flex;
							align-items: center;
							position: relative;
							z-index: 2;

							.avatar {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}

							.name {
								font-size: 32rpx;
								color: #FFFFFF;
								padding-left: 12rpx;
								box-sizing: border-box;
							}
						}

						.more {
							font-size: 24rpx;
							color: #FFFFFF;
							position: relative;
							z-index: 2;
						}

					}

					.swiper_list {
						display: flex;

						.swiper_item {
							width: 180rpx;
							margin-left: 18rpx;
							padding: 24rpx 0 32rpx;
							box-sizing: border-box;

							.book_cover {
								width: 180rpx;
								height: 210rpx;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
							}

							.book_name {
								text-align: center;
								margin-top: 14rpx;
								font-size: 28rpx;
								color: #333333;
								padding: 0 10rpx;
								box-sizing: border-box;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
</style>